<template>
  <el-container>
    <el-header style="margin-top: 40px;">
      <el-row>
        <el-col :span="1">
          <el-button @click="load" type="primary"><i class="el-icon-refresh"></i></el-button>
        </el-col>
      </el-row>
    </el-header>
    <el-main>
      <el-table
        v-loading="page.loading"
        :data="table.data"
        empty-text="暂无数据"
        style="width: 100%">
        <el-table-column
          sortable
          prop="id"
          label="编号">
        </el-table-column>
        <el-table-column
          sortable
          prop="section"
          label="板块">
        </el-table-column>
        <el-table-column
          sortable
          prop="subSection"
          label="子板块">
          <template slot-scope="scope">
            {{ scope.row.subSection | listFilter }}
          </template>
        </el-table-column>
        <el-table-column
          sortable
          prop="type"
          label="板块内容">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.type === 0" type="primary">导航栏</el-tag>
            <el-tag v-if="scope.row.type === 1" type="primary">附加</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="button"
          label="操作">
          <template slot-scope="scope">
            <el-button-group>
              <el-button @click="update(scope.row)" type="primary" icon="el-icon-edit"></el-button>
              <el-button @click="remove(scope.row)" type="primary" icon="el-icon-delete"></el-button>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        @current-change="load"
        layout="prev, pager, next"
        :total="table.total"
        :current-page="table.page">
      </el-pagination>
    </el-main>

    <el-dialog
      :close-on-click-modal="false"
      title="提示"
      :visible.sync="dialog.update.display"
      width="30%">
      <span>
        <el-form>
          <el-form-item label="名称">
            <el-input v-model="section.section"></el-input>
          </el-form-item>
          <el-form-item v-for="(item, index) in section.subSection" :key="index" :label="'子版块' + (parseInt(index) + 1)">
            <el-input v-model="section.subSection[index]" style="width: 72%;"></el-input>
            <el-button @click="section.subSection.splice(index, 1)" style="margin-left: 4%" icon="el-icon-minus" circle></el-button>
          </el-form-item>
        </el-form>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="section.subSection.push('')">添 加</el-button>
        <el-button @click="dialog.update.display = false">取 消</el-button>
        <el-button @click="update_" type="primary">确 定</el-button>
      </span>
    </el-dialog>
  </el-container>
</template>

<script>
import { page, remove, update } from '@/api/section'

export default {
  name: "SectionList",
  data () {
    return {
      table: {
        data: null,
        page: 1,
        size: 10,
        total: null
      },
      dialog: {
        update: {
          display: false
        }
      },
      section: {
        id: null,
        section: null,
        subSection: []
      },
      page: {
        loading: true
      }
    }
  },
  filters: {
    listFilter (value) {
      return value.join(',')
    }
  },
  mounted() {
    this.load()
  },
  methods: {
    update (row) {
      this.section = JSON.parse(JSON.stringify(row))
      this.dialog.update.display = true;
    },
    update_ () {
      update(this.section).then( res => {
        this.section = {
          id: null,
          section: null,
          subSection: []
        }
        this.dialog.update.display = false;
        this.load()
      })
    },
    remove (row) {
      this.$confirm('您是否确认删除该板块', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        remove(row.id).then( res => {
          console.log(res)
          this.load()
        })
      })
    },
    load (_page) {
      this.page.loading = true
      let _current = 1
      if (_page === undefined)
        _current = this.table.page;
      else
        _current = _page
      page({ page: _current, size: this.table.size }).then( res => {
        let { list, count } = res.data
        this.table.data = []
        this.table.data = list;
        this.table.total = count;
        this.page.loading = false;
      }).catch( err => console.log(err))
    }
  }
}
</script>

<style scoped>

</style>
